document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('cadCanvas');
    const ctx = canvas.getContext('2d');

    // 自动调整画布大小
    function resizeCanvas() {
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
        drawShapes();
    }

    window.addEventListener('resize', resizeCanvas, false);
    resizeCanvas();

    function drawShapes() {
        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 设置背景色
        ctx.fillStyle = '#e8f5e9';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制网格
        drawGrid(ctx, canvas.width, canvas.height, 20, '#ddd');

        // 直线
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.lineTo(300, 100);
        ctx.strokeStyle = '#ff5722';
        ctx.lineWidth = 2;
        ctx.stroke();

        // 圆形
        ctx.beginPath();
        ctx.arc(400, 200, 50, 0, Math.PI * 2, true);
        ctx.fillStyle = '#9c27b0';
        ctx.fill();
        ctx.strokeStyle = '#3f51b5';
        ctx.lineWidth = 2;
        ctx.stroke();

        // 矩形
        ctx.fillStyle = '#4caf50';
        ctx.fillRect(150, 300, 200, 100);
        ctx.strokeStyle = '#0d47a1';
        ctx.lineWidth = 3;
        ctx.strokeRect(150, 300, 200, 100);

        // 文字标注
        ctx.font = '16px Arial';
        ctx.fillStyle = '#333';
        ctx.fillText('这是一个CAD示例图形', 100, 50);
    }

    function drawGrid(ctx, width, height, step, color) {
        ctx.strokeStyle = color;
        ctx.lineWidth = 1;

        for (let x = 0; x <= width; x += step) {
            ctx.beginPath();
            ctx.moveTo(x, 0);
            ctx.lineTo(x, height);
            ctx.stroke();
        }

        for (let y = 0; y <= height; y += step) {
            ctx.beginPath();
            ctx.moveTo(0, y);
            ctx.lineTo(width, y);
            ctx.stroke();
        }
    }
});